// 技术架构页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function Technology() {
  const technologyPage = document.createElement('div');
  technologyPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  technologyPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">技术架构</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          深入了解MSRM3的技术实现和架构设计，探索其高性能、跨平台的核心优势
        </p>
      </div>
    </section>
    
    <!-- 技术亮点概览 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          <!-- 亮点1：.NET 9 AOT -->
          <div class="bg-gray-50 rounded-lg p-6 text-center">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-bolt"></i></div>
            <h3 class="text-xl font-bold mb-2">.NET 9 AOT</h3>
            <p class="text-gray-600">提前编译技术，代码直接转为机器码，启动速度提升3倍</p>
          </div>
          
          <!-- 亮点2：跨平台支持 -->
          <div class="bg-gray-50 rounded-lg p-6 text-center">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-globe"></i></div>
            <h3 class="text-xl font-bold mb-2">跨平台支持</h3>
            <p class="text-gray-600">支持Windows、Linux、国产信创系统，一次开发多平台运行</p>
          </div>
          
          <!-- 亮点3：单文件部署 -->
          <div class="bg-gray-50 rounded-lg p-6 text-center">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-file-o"></i></div>
            <h3 class="text-xl font-bold mb-2">单文件部署</h3>
            <p class="text-gray-600">单一可执行文件，无外部依赖，绿色免安装，部署简便</p>
          </div>
          
          <!-- 亮点4：轻量级设计 -->
          <div class="bg-gray-50 rounded-lg p-6 text-center">
            <div class="text-4xl text-primary mb-4"><i class="fa fa-feather"></i></div>
            <h3 class="text-xl font-bold mb-2">轻量级设计</h3>
            <p class="text-gray-600">核心程序仅2.6MB，极低的资源占用，适合各种硬件环境</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 系统架构图 -->
    <section class="section-padding bg-gray-50">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">系统架构设计</h2>
        <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 mb-10">
          <div class="h-96 bg-gray-50 rounded-lg flex items-center justify-center">
            <div class="text-center">
              <i class="fa fa-sitemap text-8xl text-primary/70 mb-4"></i>
              <p class="text-gray-500 text-lg">MSRM3系统架构图</p>
            </div>
          </div>
        </div>
        
        <!-- 架构说明 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 核心引擎层 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-xl font-bold mb-4 text-primary flex items-center">
              <i class="fa fa-cogs mr-2"></i>核心引擎层
            </h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>基于.NET 9 Runtime，支持AOT编译</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>多线程并行处理引擎，提升数据处理效率</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>内存优化管理，降低资源占用</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>模块化设计，便于扩展和维护</span>
              </li>
            </ul>
          </div>
          
          <!-- 服务层 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-xl font-bold mb-4 text-primary flex items-center">
              <i class="fa fa-server mr-2"></i>服务层
            </h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>Web API服务，提供RESTful接口</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>网络发现服务，支持SNMP和Ping扫描</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>数据采集服务，实时监控网络状态</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>告警服务，支持自定义告警规则</span>
              </li>
            </ul>
          </div>
          
          <!-- 表现层 -->
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-xl font-bold mb-4 text-primary flex items-center">
              <i class="fa fa-desktop mr-2"></i>表现层
            </h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>Web UI，基于现代前端技术</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>响应式设计，支持移动端和PC端</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>数据可视化，支持图表展示</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>矢量拓扑图，支持自定义布局</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 技术指标对比 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">技术指标对比</h2>
        
        <!-- 性能对比图表 -->
        <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 mb-10">
          <h3 class="text-xl font-bold mb-6 text-center">性能对比（旧版 vs 重构AOT版）</h3>
          <div id="performance-chart" class="h-80 bg-gray-50 rounded-lg flex items-center justify-center">
            <div class="text-center">
              <i class="fa fa-bar-chart text-6xl text-primary/70 mb-4"></i>
              <p class="text-gray-500">性能对比图表</p>
            </div>
          </div>
        </div>
        
        <!-- 系统要求 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-xl font-bold mb-4 text-center text-primary">Windows系统要求</h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>操作系统：Windows 7/8/10/11</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>处理器：1GHz及以上</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>内存：512MB及以上</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>硬盘空间：10MB及以上</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>浏览器：Chrome 90+、Firefox 88+、Edge 90+</span>
              </li>
            </ul>
          </div>
          
          <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 class="text-xl font-bold mb-4 text-center text-primary">Linux系统要求</h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>操作系统：Ubuntu 20.04+、Debian 11+、CentOS 7+等主流Linux发行版</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>处理器：1GHz及以上</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>内存：512MB及以上</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>硬盘空间：10MB及以上</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                <span>浏览器：Chrome 90+、Firefox 88+</span>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 国产化支持 -->
        <div class="bg-gray-50 rounded-xl shadow-md p-6 border border-gray-100 mb-10">
          <h3 class="text-xl font-bold mb-6 text-center text-primary">国产化支持</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white p-4 rounded-lg text-center shadow-sm">
              <i class="fa fa-desktop text-3xl text-primary mb-3"></i>
              <p class="font-bold">银河麒麟</p>
              <p class="text-sm text-gray-600">V4/V5版本</p>
            </div>
            <div class="bg-white p-4 rounded-lg text-center shadow-sm">
              <i class="fa fa-desktop text-3xl text-primary mb-3"></i>
              <p class="font-bold">统信UOS</p>
              <p class="text-sm text-gray-600">专业版/企业版</p>
            </div>
            <div class="bg-white p-4 rounded-lg text-center shadow-sm">
              <i class="fa fa-microchip text-3xl text-primary mb-3"></i>
              <p class="font-bold">飞腾CPU</p>
              <p class="text-sm text-gray-600">FT-2000/4等</p>
            </div>
            <div class="bg-white p-4 rounded-lg text-center shadow-sm">
              <i class="fa fa-microchip text-3xl text-primary mb-3"></i>
              <p class="font-bold">鲲鹏CPU</p>
              <p class="text-sm text-gray-600">Kunpeng 920等</p>
            </div>
          </div>
          <div class="mt-6 bg-blue-50 p-4 rounded-lg border border-blue-100 text-center">
            <p class="text-blue-700">
              <i class="fa fa-info-circle mr-2"></i>
              所有国产系统均经过严格测试，确保兼容性和稳定性
            </p>
          </div>
        </div>
        
        <!-- 立即体验按钮 -->
        <div class="text-center">
          <button id="try-now-btn" class="btn-primary px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:shadow-xl">
            <i class="fa fa-download mr-2"></i>体验高性能技术架构
          </button>
        </div>
      </div>
    </section>
    
  `;
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  technologyPage.appendChild(contentContainer);
  technologyPage.appendChild(footer);
  
  // 添加导航事件监听
  contentContainer.querySelector('#try-now-btn').addEventListener('click', () => navigateTo('/download'));
  
  // 尝试初始化性能对比图表（简化版，实际项目中可使用Chart.js）
  function initChart() {
    const chartContainer = contentContainer.querySelector('#performance-chart');
    if (chartContainer) {
      // 由于我们不能直接运行代码，这里简化展示图表数据
      chartContainer.innerHTML = `
        <div class="p-4 w-full">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
              <p class="text-gray-600 mb-2">启动速度对比</p>
              <div class="flex items-end justify-center space-x-4">
                <div class="text-center">
                  <div class="w-16 bg-gray-300 rounded-t-md mb-2" style="height: 80px;"></div>
                  <p class="text-sm">旧版</p>
                </div>
                <div class="text-center">
                  <div class="w-16 bg-primary rounded-t-md mb-2" style="height: 20px;"></div>
                  <p class="text-sm">AOT版</p>
                </div>
              </div>
              <p class="text-green-600 mt-2">速度提升300%</p>
            </div>
            <div class="text-center">
              <p class="text-gray-600 mb-2">内存占用对比</p>
              <div class="flex items-end justify-center space-x-4">
                <div class="text-center">
                  <div class="w-16 bg-gray-300 rounded-t-md mb-2" style="height: 100px;"></div>
                  <p class="text-sm">旧版</p>
                </div>
                <div class="text-center">
                  <div class="w-16 bg-primary rounded-t-md mb-2" style="height: 40px;"></div>
                  <p class="text-sm">AOT版</p>
                </div>
              </div>
              <p class="text-green-600 mt-2">内存降低60%</p>
            </div>
            <div class="text-center">
              <p class="text-gray-600 mb-2">文件大小对比</p>
              <div class="flex items-end justify-center space-x-4">
                <div class="text-center">
                  <div class="w-16 bg-gray-300 rounded-t-md mb-2" style="height: 120px;"></div>
                  <p class="text-sm">旧版</p>
                </div>
                <div class="text-center">
                  <div class="w-16 bg-primary rounded-t-md mb-2" style="height: 25px;"></div>
                  <p class="text-sm">AOT版</p>
                </div>
              </div>
              <p class="text-green-600 mt-2">体积减小85%</p>
            </div>
          </div>
        </div>
      `;
    }
  }
  
  // 页面加载后初始化图表
  setTimeout(initChart, 100);
  
  return technologyPage;
}

export default Technology;